<template>
  <div class="home">
    <button @click="levelplus">递增level</button>
    <!-- 1.在模版中直接使用多个状态 -->
    <h2>doubleCounter:{{ doubleCounter }}</h2>
    <h2>totalAge:{{ totalAge }}</h2>
    <h2>message:{{ message }}</h2>
    <h2>getUserById:{{ getUserById(112) }}</h2>

  </div>
</template>
<script>
import { mapGetters } from 'vuex';

export default {
  computed:{
    ...mapGetters(["doubleCounter",'totalAge',]),
    ...mapGetters(["getUserById"])
  }
}
</script>

<script setup>
import {computed,toRefs} from 'vue'
 import { mapGetters, useStore } from 'vuex';
 const store = useStore()

//  1.使用 mapGetters
//  const { message: messageFn} =mapGetters(['message'])
//  const message = computed(messageFn.bind({$store: store }))
// 2.直接解构, 并且转成ref
// const { message } = toRefs(store.getters)
// 3.针对某一个getters属性使用computed
const message = computed(()=>store.getters.message)
</script>